import React, { Component } from 'react';
import { NoticeBar,Form,Input,Button } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import "./style.scss"

    
class Index extends Component {
    state={
        demoLongText:'可向多个商家资讯最低价，商家及时回复!!!可向多个商家资讯最低价，商家及时回复!!!可向多个商家资讯最低价，商家及时回复',
        demoSrc:'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
        city:JSON.parse(localStorage.getItem('city'))
    }
    render() {
        const {demoLongText,demoSrc,city}=this.state
        return (
            <div className='detailWrap'>
                <NoticeBar content={demoLongText} color='alert' />
                <main>
                    <dl>
                        <dt><img src={demoSrc} alt="" /></dt>
                        <dd>
                            <p>宝马五系</p>
                            <p>525Li豪华套装</p>
                        </dd>
                        <RightOutline></RightOutline>
                    </dl>
                    <p>个人信息</p>
                    <div className="wrap">
                    <Form
                        layout='horizontal'
                        footer={
                            <Button block type='submit' color='primary'>
                            资讯最低价
                            </Button>
                        }
                        >
                        <Form.Item
                            name='姓名'
                            label='姓名'
                            rules={[{  message: '姓名不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='输入你的真实姓名' />
                        </Form.Item>
                        <Form.Item
                            name='手机'
                            label='手机'
                            rules={[{  message: '手机号码不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='输入你的真实手机号码' />
                        </Form.Item>
                        <Form.Item
                            name='城市'
                            label='城市'
                            
                        >
                            <span onClick={()=>this.props.history.push('/city')}>{city}</span>
                        </Form.Item>
                        </Form>
                    </div>
                    <p>选择报价经销商</p>
                </main>
            </div>
        );
    }
}

export default Index;
